<template>
  <input type="text" v-model="str">
  <div>{{num}}</div>
  <div>{{obj}}</div>
  <button @click="btn">修改</button>
  <button @click="btn2">修改num</button>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';
let str = ref('1')
let num = ref(1)
const btn2 = () => {
  num.value = 2
}
let obj = reactive({
  a: 1,
  b: 2,
  m: {
    p: 1
  }
})
const btn = () => {
  obj.m.p = 'xxxxdx'
}
//监听多个属性
watch([str, num], (newval) => {
  console.log(1111, newval);
})
//监听整个obj
// watch(obj, (newval) => {
//   console.log(newval);
// })
//监听对象里面的某一个属性
watch(() => obj.a, (newVal) => {
  console.log(newVal);
})
//监听对象某一个key并且深度监听 需要deep
watch(() => obj.m, (newVal) => {
  console.log('深度监听', newVal);
}, {
  immediate: true,  //初始化监听
  deep: true
})

</script>

<style>
</style>